export default class HeaderDropDown {
    constructor(element, option) {
        this.$element = $(element);
        this.$target = $(this.$element.data('target'));
        this.$targetParent = this.$target.parent();
        // this.options = Object.assign({}, option);
        this.isShow = false;
        this.height = this.getTargetHeight();

        this.$targetParent.on('transitionend', (e) => {
            if (this.isShow) {
                return
            }
            this.$targetParent.hide();
            this.$target.hide();
            this.isShow = false;
        });


        this.$element.hover((e) => {
            this.toggleDropdown(true);
        }, (e) => {
            this.toggleDropdown(false);
        })

        this.$targetParent.hover((e) => {
            this.toggleDropdown(true);
        }, (e) => {
            this.toggleDropdown(false);
        })
    }


    toggleDropdown(show) {
        if (show) {
            this.$target.show();
            this.isShow = true;
            this.$targetParent.show().height(this.height).siblings().hide().children().hide();

        } else {
            this.$targetParent.height(0);
            this.isShow = false;
        }
    }

    getTargetHeight() {
        return this.$target.height();
    }

}


